<script setup>
import { ref } from "vue";
import { VueUiGauge } from "vue-data-ui";
import "vue-data-ui/style.css"; // 如果您使用多个组件，请将此样式导入放在您的主文件中


// 定义组件属性
const props = defineProps({
  // 数值属性，默认值为20
  value: {
    type: Number,
    default: 20
  },
  // 标题属性，默认值为'Title'
  title: {
    type: String,
    default: 'Title'
  },
  // 副标题属性
  subtitle: {
    type: String,
    default: 'Subtitle'
  },
  // 宽度属性
  width: {
    type: String,
    default: '600px'
  }
});


const config = ref({
        debug: false,
        loading: false,
        responsive: false,
        theme: '',
        customPalette: [],
        style: {
            fontFamily: 'inherit',
            chart: {
                backgroundColor: '#FFFFFFff',
                color: '#1A1A1Aff',
                animation: {
                    use: true,
                    speed: 3,
                    acceleration: 1
                },
                layout: {
                    radiusRatio: 1,
                    track: {
                        size: 1,
                        useGradient: true,
                        gradientIntensity: 20
                    },
                    markers: {
                        show: true,
                        color: '#1A1A1Aff',
                        bold: true,
                        fontSizeRatio: 1,
                        offsetY: 0,
                        roundingValue: 0,
                        formatter: null,
                        prefix: '',
                        suffix: ''
                    },
                    segmentSeparators: {
                        show: false,
                        offsetOut: 0,
                        offsetIn: 0,
                        stroke: '#1A1A1Aff',
                        strokeWidth: 2
                    },
                    segmentNames: {
                        show: true,
                        curved: true,
                        offsetRatio: 1.1,
                        fontSize: 16,
                        minFontSize: 6,
                        useSerieColor: true,
                        color: '#1A1A1Aff',
                        bold: false
                    },
                    indicatorArc: {
                        show: false,
                        radius: 123,
                        fill: '#E1E5E8'
                    },
                    pointer: {
                        show: true,
                        type: 'pointy',
                        size: 1,
                        stroke: '#1A1A1Aff',
                        strokeWidth: 12,
                        useRatingColor: true,
                        color: '#CCCCCCff',
                        circle: {
                            radius: 10,
                            stroke: '#1A1A1Aff',
                            strokeWidth: 2,
                            color: '#FFFFFFff'
                        }
                    }
                },
                legend: {
                    show: true,
                    fontSize: 48,
                    prefix: '',
                    suffix: '',
                    roundingValue: 1,
                    showPlusSymbol: true,
                    useRatingColor: true,
                    color: '#1A1A1Aff',
                    formatter: null
                },
                title: {
                    text: props.title,
                    color: '#1A1A1Aff',
                    fontSize: 20,
                    bold: true,
                    textAlign: 'center',
                    paddingLeft: 0,
                    paddingRight: 0,
                    subtitle: {
                        color: '#A1A1A1ff',
                        text: props.subtitle,
                        fontSize: 16,
                        bold: false
                    }
                }
            }
        },
        userOptions: {
            show: true,
            showOnChartHover: false,
            keepStateOnChartLeave: true,
            position: 'right',
            buttons: {
                tooltip: false,
                pdf: true,
                csv: false,
                img: true,
                table: false,
                labels: false,
                fullscreen: true,
                sort: false,
                stack: false,
                animation: false,
                annotator: true
            },
            callbacks: {
                animation: null,
                annotator: null,
                csv: null,
                fullscreen: null,
                img: null,
                labels: null,
                pdf: null,
                sort: null,
                stack: null,
                table: null,
                tooltip: null
            },
            buttonTitles: {
                open: 'Open options',
                close: 'Close options',
                pdf: 'Download PDF',
                img: 'Download PNG',
                fullscreen: 'Toggle fullscreen',
                annotator: 'Toggle annotator'
            },
            print: {
                scale: 2,
                orientation: 'auto',
                overflowTolerance: 0.2
            }
        },
        translations: {
            base: 'Base'
        }
    });

const dataset = ref({
    series: [
        {
            from: 0,
            to: 20,
            color: '#6376DD',
            id: '111',
            name: 'Label 1',
            nameOffsetRatio: 1
        },
        {
            from: 20,
            to: 100,
            color: '#42d392',
            id: '222',
            name: 'Label 2',
            nameOffsetRatio: 1
        }
    ],
    base: undefined,
    value: props.value
});

</script>
<template>
    <!-- Using a wrapper is optional -->
    <div :style="{ width: '600px'}">
        <VueUiGauge
            :config="config"
            :dataset="dataset"
        />
    </div>
</template>